<template>
  <el-dialog
  title="编辑分类"
  :visible.sync="editorSortdialogVisible"
  width="60%"
  @closed="closeEditorDialog">
  
  <!-- 编辑分类名 -->
  <el-form ref="editorGoodSortFormRef" 
      :model="editorGoodSortObj" label-width="150px" 
      :rules="editorGoodSortRules">

    <el-form-item label="编辑分类名:" prop="cat_name">
      <el-input v-model="editorGoodSortObj.cat_name"></el-input>
    </el-form-item>

  </el-form>

  <!-- 按钮区域 -->
  <span slot="footer">
    <el-button @click="editorSortdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="requestSendEditor">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
// 方法
import { getFindItemById, putEditorInfo } from '@/network/goodSortRequest';

export default {
  data() {
    return {
      editorSortdialogVisible: false, // 控制dialog打开关闭
      editorGoodSortObj: { // 编辑对象
        cat_name: '',
        id: ''
      },
      editorGoodSortRules: { // 编辑规则
        'cat_name': [{ required: true, message: '请输入编辑的名称', trigger: 'blur' },]
      }
    }
  },
  methods: {
    openEditorGoodSortDiaolg(id) {
      this.findItemById(id);
      // console.log(id);
      this.editorSortdialogVisible = true;
    },
    async findItemById (id) {
      const { data, meta } = await getFindItemById(id);
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.editorGoodSortObj.cat_name = data.cat_name;
      this.editorGoodSortObj.id = data.cat_id;
      // console.log(this.editorGoodSortObj);
      return;
    },
    closeEditorDialog() { // 关闭dialog重置
      this.$refs['editorGoodSortFormRef'].resetFields();
    },
    requestSendEditor() { // 网络请求编辑信息
      this.$refs['editorGoodSortFormRef'].validate(async val => {
        if (!val) {
          return this.$message.error('根据提示填写完整');
        }
        const { meta } = await putEditorInfo(this.editorGoodSortObj.id, { 
          'cat_name': this.editorGoodSortObj.cat_name 
        })
        if (meta.status !== 200) {
          console.log(meta);
          return this.$message.error(meta.msg);
        }
        this.$bus.$emit('getAllGoodsInfo');
        this.$message.success(meta.msg);
        return this.editorSortdialogVisible = false;
      })
    }
  },
  created() {
    this.$bus.$on('openEditorGoodSortDiaolg', (id) => this.openEditorGoodSortDiaolg(id));
  },
  destroyed() {
    this.$bus.$off('openEditorGoodSortDiaolg');
  },
  components: {
    
  }
}
</script>

<style lang="scss" scoped>

</style>